<!--
 * @FileDescription: 聊天下注
-->
<template>
  <div class="container">
    <Popup v-model:show="show" position="bottom" class="investPopupHeight" :overlay="false">
      <div class="popup">
        <div class="top-box row-space-between" @click="show = !show">
          <div class="left-box all-center"><div class="content" /></div>
          <div class="center-box all-center">
            单期最高派奖{{ numberToChinese(allGame?.[currentGame]?.maxReward) }}万
          </div>
          <div class="right-box">
            <Icon name="arrow-down" color="#FFFFFF" size="22" />
          </div>
        </div>
        <div class="pop">
          <div class="popup-lf">
            <div
              class="li"
              v-for="(item, index) in gameTemplateData"
              :class="currentGameType === index ? 'actives' : ''"
              @click="setCurrentGameType(index)"
              :key="index"
            >
              {{ item.playTypeName }}
            </div>
          </div>
          <div class="popup-content">
            <Handicap @update-template="getList"/>
            <component ref="gameRef" :is="getGameComponentTag" :renderData="getCurrentGameData" />
          </div>
        </div>
        <investPopup @betNow="betNow($refs)" @updateInvestList="clearInvestList($refs)" />
      </div>
    </Popup>
  </div>
</template>

<script>
import investPopup from '@/components/invest-popup.vue'
import { mapState, mapActions, mapGetters } from 'pinia'
import { numberToChinese } from '@/utils'
import { useGameStore } from '@/stores/game'
import { useLhcStore } from '@/stores/tpl-lhc'
import { isEmpty } from 'lodash-es'
import SubGame from '@/components/game/tpl-lhc/game/lhc-sub-game.vue'
import CommonGame from '@/components/game/tpl-lhc/game/lhc-common-game.vue'
import { Popup, Icon } from 'vant'
import Handicap from '@/components/Handicap.vue'

export default {
  components: { investPopup, SubGame, CommonGame, Popup, Icon, Handicap },
  data() {
    return { show: false }
  },
  mounted() {
    this.init()
  },
  computed: {
    ...mapState(useLhcStore, {
      currentGameType: ({ currentGameType }) => currentGameType,
      gameTemplateData: ({ gameTemplateData }) => gameTemplateData,
    }),
    ...mapState(useGameStore, { currentGame: ({ currentGame }) => currentGame }),
    ...mapGetters(useGameStore, ['allGame']),
    ...mapGetters(useLhcStore, {
      getCurrentGameData: 'getCurrentGameData',
      getGameComponentTag: 'getGameComponentTag',
    }),
  },

  methods: {
    ...mapActions(useLhcStore, {
      init: 'init',
      setCurrentGameType: 'setCurrentGameType',
      betNow: 'betNow',
      clearInvestList: 'clearInvestList',
      getList: 'fetchGameTemplateData',
    }),
    numberToChinese,
    open() {
      this.show = true
      if (!isEmpty(this.gameTemplateData)) return
      this.getList()
    },
  },
}
</script>

<style scoped lang="less">
@import url('lhc.less');
</style>
